<template>
	<view class="customerForm">
		<uni-forms ref="baseForm" :modelValue="formData" label-width="90px" :rules="rules">
			<uni-forms-item label="客户名称" required name="cCusName">
				<view style="display: flex;">
					<uni-easyinput disabled v-model="formData.cCusName" placeholder="请选择客户" />
					<button type="default" size="mini" @click="toCustomer">
						<uni-icons type="staff-filled"></uni-icons>
					</button>
				</view>
			</uni-forms-item>
			<uni-forms-item label="联系人" required name="cName">
				<uni-easyinput v-model="formData.cName" placeholder="请输入联系人" />
			</uni-forms-item>
			<uni-forms-item label="联系方式" required name="cPhone">
				<uni-easyinput type="number" v-model="formData.cPhone" placeholder="请输入联系方式" />
			</uni-forms-item>
		</uni-forms>
		<button type="primary" @click="submit">保 存</button>
	</view>
</template>

<script>
	import {
		regPhone
	} from '@/utils/regExp.js'
	export default {
		data() {
			return {
				cCusId:"",
				cCustomer:"",
				formData: {
					ISsignCode: true
				},
				rules: {
					cCusName: {
						rules: [{
							required: true,
							errorMessage: '请选择客户',
						}]
					},
					cName: {
						rules: [{
							required: true,
							errorMessage: '请输入客户名称',
						}]
					},
					cPhone: {
						rules: [{
							required: true,
							errorMessage: '请输入联系方式',
						}, {
							validateFunction: (rule, value, data, callback) => {
								if (!regPhone.test(value)) return callback('手机号格式错误')
								return true
							}
						}]
					},
				}
			}
		},
		onLoad(query) {
			console.log('获取联系人页面的query',query);
			
			if (query.Id) {
				this.getTheData(query.Id)
				uni.setNavigationBarTitle({
					title: '编辑客户联系人'
				})
			}
			if(query.cCustomer){
				this.formData.cCusName=query.cCustomer
				this.formData.cCusId = query.cCusId
			}
			
			this.formData.CompanyId = uni.getStorageSync('CompanyInfo').Id
		},
		onShow() {
			uni.$on('updateData', (data)=> {
				console.log(data);
				if (data) {
					this.$set(this.formData, 'cCusName', data.cCusName)
					this.$set(this.formData, 'cCusId', data.Id)
					this.$set(this.formData, 'cCusCode', data.cCusCode)
				}
			})
		},
		methods: {
			toCustomer() {
				uni.navigateTo({
					url: '/pages/Information/page/Customer?type=ContactPerson'
				})
			},
			getTheData(id) {
				this.$http("post", "/BO/CustomerLinkman/GetTheData", {
					id
				}).then((res) => {
					if (res.Success) {
						this.formData = res.Data;
					} else uni.showToast({
						icon: 'none',
						title: res.Msg
					})
				});
			},
			submit() {
				this.$refs['baseForm'].validate().then(res => {
					uni.showLoading()
					this.$http('post', "/BO/CustomerLinkman/SaveData", this.formData)
						.then((res) => {
							uni.hideLoading()
							if (res.Success) {
								uni.showToast({
									icon: 'none',
									title: '保存成功'
								})
								setTimeout(() => {
									uni.navigateBack()
								}, 1000)
							} else uni.showToast({
								icon: 'none',
								title: res.Msg
							})
						});
				}).catch(err => {
					console.log(err);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.customerForm {
		padding: 20rpx;
		box-sizing: border-box;

		.flex {
			dispaly: flex;
		}
	}
</style>